import React, { PureComponent } from 'react'

import { Button } from 'antd'

import { connect } from 'react-redux'

import {subAction} from '../store-split-group/counter/actionCreators'

class About extends PureComponent {
  render() {
    
    return (
      <div>
        About
        <h3>当前计数: {this.props.counter}</h3>
        <Button type="primary" onClick={(e) => this.props.subNumber(1)}>-1</Button>
        <Button type="primary" onClick={(e) => this.props.subNumber(5)}>-5</Button>
        <ul>
          {
            this.props.banners.map((row, index) => (
              <li key={row.id}>{row.name}</li>
            ))
          }
        </ul>
      </div>
    )
  }
}

// 将state映射为props
const mapStateToProps = (storeState) => ({
  counter: storeState.counterInfo.counter, // 获取store中的count值
  banners: storeState.fetchDataInfo.banners
})
const mapDispatchToProps = (storeDispatch) => ({
  subNumber: (num) => storeDispatch(subAction(num))  // 定义dispatchAction方法
})

export default connect(mapStateToProps, mapDispatchToProps)(About)
